{% extends 'cms/cms_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    轮播图管理
{% endblock %}

{% block head %}

    {#    七牛JS的SDK#}
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
    <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
    <script src="{{ static('common/zlqiniu.js') }}"></script>

    <link rel="stylesheet" href="{{ static('cms/css/cms_banner.css') }}">

    <script src="{{ static('cms/js/banners.js') }}"></script>
{% endblock %}


{% block page_title %}
    {{ self.title() }}
{% endblock %}


{% block main_content %}
    <div class="top-box">
        {#按钮-添加图片#}
        {# 1.通过data-target绑定了模态对话框。那么，第一次编辑后的数据第二次还会再次显示出来#}
        {# 2.和javascript直接显示模态对话框【show】的区别是：模态对话框不会保存内容，每次对话框关闭后都会清空数据。#}
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
    </div>
    {#表格#}
    <table class="table table-bordered banner-table">
        <thead>
        <tr>
            <th>图片链接</th>
            <th>日期</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for banner in banners %}
            {#把属性和值绑定到标签上面，便于下面的编辑和删除能够在JS中使用到#}
            <tr data-image="{{ banner.image_url }}"
                data-date="{{ banner.choose_date }}" data-id="{{ banner.id }}">
                {#设置图片可以点击跳转到新的tab页面展示#}
                <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
                <td>{{ banner.current_date|getDate }}</td>
                <td>{{ banner.create_time }}</td>
                <td>
                    {#btn-xs 把按钮大小调小#}
                    {#由于for循环中的编辑要针对所有数据，所以加一个class：edit-banner-btn#}
                    <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>

                    {#删除的的class：delete-banner-btn#}
                    <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>


    </table>

    {#模态对话框：https://v3.bootcss.com/javascript/#modals#}
    {#默认不会显示，只有点击了模态对话框绑定的按钮，才会显示出来#}
    <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">轮播图</h4>
                </div>
                <div class="modal-body">
                    {#参考：https://v3.bootcss.com/css/#forms#}
                    <form class="form-horizontal">

                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">图片：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="image_url" placeholder="轮播图图片">
                            </div>

                            <button class="btn btn-info col-sm-2" id="upload-btn">添加图片</button>

                        </div>

                        <div class="form-group">
                            <label for="inputDate" class="col-sm-2 control-label">日期：</label>
                            <div class="col-sm-10">
                                <input type="date" name="current_date" class="form-control" value="{{ current_date }}"
                                       id="date-input"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="close-banner-btn">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-banner-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}